<template>
  <!-- 更新进展、更新批注 -->
  <base-breadcrumb :title="pageTitle">
    <a-spin :spinning="loadingState.isDetail">
      <div class="box">
        <a-card>
          <title-name title="项目信息" />
          <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
            <a-descriptions-item label="所属单位">
              {{ formInfo.branchComName+'/'+formInfo.projectName || '无' }}
            </a-descriptions-item>
            <!-- <a-descriptions-item label="分公司名称">
              {{ formInfo.branchComName || '无' }}
            </a-descriptions-item>
            <a-descriptions-item label="项目名称">
              {{ formInfo.projectName || '无' }}
            </a-descriptions-item> -->
          </a-descriptions>
        </a-card>
      </div>
      <div class="box">
        <a-card>
          <title-name title="执行案件信息" />
          <div class="main_content">
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="函件编号">
                {{ formInfo.code || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="函件名称">
                {{ formInfo.name || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="发函单位">
                {{ formInfo.seddingUnit || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="申请执行人">
                {{ formInfo.executor || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="被执行人">
                {{ formInfo.byExecutor || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="收到时间">
                {{ formInfo.receivedDate || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="处理状态">
                {{ resolveStatus(formInfo.caseStatus) || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="备注">
                {{ formInfo.remark || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="主要内容">
                {{ formInfo.content || '无' }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 3, sm: 3, md: 3 }">
              <a-descriptions-item label="创建人">
                {{ formInfo.creatorName || '无' }}
              </a-descriptions-item>
              <a-descriptions-item label="创建时间">
                {{ formInfo.createTime || '无' }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </div>

      <!-- 进展情况 -->
      <div
        v-if="(pageType === 'look' && !updateType) || updateType === 'progress'"
        class="box"
      >
        <a-card>
          <title-name title="进展情况" />
          <a-button
            v-if="updateType === 'progress'"
            class="mb12"
            type="primary"
            @click="updateProgress('add')"
          >
            新增进展情况
          </a-button>
          <a-table
            :columns="progressColumn"
            :data-source="formInfo.processUpdateList"
            row-key="tableId"
            :pagination="false"
            bordered
          >
            <div
              slot="fileInfoList"
              slot-scope="text, record"
            >
              <file-link :file-list="text" />
            </div>
            <div
              slot="Serial"
              slot-scope="text, record, index"
            >
              <template>
                <span>{{ index + 1 }}</span>
              </template>
            </div>
            <div
              slot="action"
              slot-scope="text, record"
            >
              <template>
                <div class="pub-table-list-action">
                  <span
                    v-if="record.creatorId === $userInfo().id"
                    @click="updateProgress('edit', record)"
                  >编辑</span>
                  <span
                    v-if="record.creatorId === $userInfo().id"
                    @click="updateProgress('delete', record)"
                  >删除</span>
                </div>
              </template>
            </div>
          </a-table>
        </a-card>
      </div>
      <!-- 批注意见 -->
      <div
        v-if="(pageType === 'look' && !updateType) || updateType === 'comment'"
        class="box"
      >
        <a-card>
          <title-name title="批注意见" />
          <a-button
            v-if="updateType === 'comment'"
            class="mb12"
            type="primary"
            @click="updateComment('add')"
          >
            添加
          </a-button>
          <a-table
            :columns="commentColumn"
            :data-source="formInfo.executionComments"
            row-key="tableId"
            :pagination="false"
            bordered
          >
            <div
              slot="attach"
              slot-scope="text, record"
            >
              <file-link :file-list="record.fileArrays" />
            </div>
            <div
              slot="Serial"
              slot-scope="text, record, index"
            >
              <template>
                <span>{{ index + 1 }}</span>
              </template>
            </div>
            <div
              slot="postilFileList"
              slot-scope="text, record"
            >
              <file-link :file-list="text" />
            </div>
            <div
              slot="feedbackFileList"
              slot-scope="text, record"
            >
              <file-link :file-list="text" />
            </div>
            <template
              slot="sendStatus"
              slot-scope="text"
            >
              {{ text ? '已推送' : '未推送' }}
            </template>
            <div
              slot="action"
              slot-scope="text, record"
            >
              <template>
                <MoreButton>
                  <a
                    v-if="!record.sendStatus && record.creatorId === $userInfo().id"
                    @click="updateComment('edit', record)"
                  >编辑</a>
                  <a
                    v-if="!record.sendStatus && record.creatorId === $userInfo().id"
                    @click="updateComment('delete', record)"
                  >删除</a>
                  <a
                    v-if="!record.sendStatus"
                    v-btnPermission="'lcm_004_ts_01'"
                    @click="updateComment('push', record)"
                  >推送</a>
                </MoreButton>
              </template>
            </div>
          </a-table>
        </a-card>
      </div>
      <!-- 销项信息 -->
      <div
        v-if="formInfo.destroyed"
        class="box"
      >
        <a-card>
          <title-name title="函件销项" />
          <div style="margin-left: 20px">
            <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="证明附件">
                <file-link :file-list="formInfo.destroyed.fileInfoList" />
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="销项说明">
                {{ formInfo.destroyed.comment }}
              </a-descriptions-item>
            </a-descriptions>
            <a-descriptions :column="{ xs: 1, sm: 1, md: 1 }">
              <a-descriptions-item label="销项人">
                {{ formInfo.destroyed.creatorName }}
              </a-descriptions-item>
              <a-descriptions-item label="销项时间">
                {{ formInfo.destroyed.createTime }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </a-card>
      </div>
      <!-- 附件 -->
      <div class="box">
        <a-card>
          <title-name title="附件列表" />
          <UploadTableNew
            ref="uploadTable"
            mode="look"
            :disabled="true"
            :init-file-list="formInfo.fileList"
            :need-page="false"
            business-code="LCM12"
          />
        </a-card>
      </div>
    </a-spin>
    <div
      class="operation page-btn-right-top"
    >
      <a-button @click="handleClose">
        关闭
      </a-button>
    </div>
    <div class="coverlayer" v-if="visible">
      <feed-back
        :visible="visible"
        :feedback-data="feedbackData"
        @ok="() => (visible = false)"
        @cancel="() => (visible = false)"
      />
    </div>
    <!-- 更新进展 -->
    <add-update
      ref="addUpdate"
      :visible="addUpdateVisible"
      :form="addUpdateForm"
      @ok="
        addUpdateVisible = false
        getDetailReq()
      "
      @cancel="addUpdateVisible = false"
    />
    <!-- 更新批注 -->
    <UpdateComment
      :visible.sync="visibleState.comment"
      :form="addUpdateForm"
      @ok="updateCommentFinish"
    />
    <!-- 选择人员 -->
    <SelectPersonModal
      :is-mutilple="false"
      :persons.sync="personList"
      :visible.sync="visibleState.selectPerson"
      @confirmSelect="selectPersonFinish"
    />
  </base-breadcrumb>
</template>

<script>
import {
  deleteComment,
  deleteProgress,
  getDetail,
  pushComment,
  getCommentDetailByApproval
} from '@/api/legal/caseAndLetter/caseManage.js'
import { getLawyerLetterDetails } from '@/api/legal'
import feedBack from '../feedback'
import addUpdate from './UpdateProgress'
import UpdateComment from './UpdateComment'
import { packageConfirm } from '@/utils/baseAction.js'
import SelectPersonModal from '@/components/SelectPersonModal'
import { CASE_STATUS_MAP } from '@/config/businessConfig.js'

const progressColumn = [
  {
    title: '序号',
    scopedSlots: { customRender: 'Serial' },
    width: '65px',
    align: 'center',
  },
  {
    title: '进展情况',
    dataIndex: 'promotionMatters',
    width: '40%',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '附件',
    dataIndex: 'fileInfoList',
    scopedSlots: { customRender: 'fileInfoList' },
    align: 'center',
  },
  {
    title: '创建人',
    dataIndex: 'creatorName',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  }
]
const commentColumn = [
  {
    title: '序号',
    scopedSlots: { customRender: 'Serial' },
    width: '65px',
    align: 'center',
  },
  {
    title: '批注意见',
    dataIndex: 'postilSuggestion',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '附件',
    dataIndex: 'postilFileList',
    scopedSlots: { customRender: 'postilFileList' },
    align: 'center',
  },
  {
    title: '批注人',
    dataIndex: 'creatorName',
    align: 'center',
  },
  {
    title: '批注时间',
    dataIndex: 'createTime',
    align: 'center',
  },
  {
    title: '推送状态',
    dataIndex: 'sendStatus',
    scopedSlots: { customRender: 'sendStatus' },
    align: 'center',
  },
  {
    title: '推送人员',
    dataIndex: 'pushUserName',
    align: 'center',
  },
  {
    title: '反馈信息',
    dataIndex: 'feedbackSuggestion',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '反馈附件',
    dataIndex: 'feedbackFileList',
    scopedSlots: { customRender: 'feedbackFileList' },
    align: 'center',
  },
  {
    title: '反馈时间',
    dataIndex: 'feedbackDate',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '180px',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  }
]
export default {
  name: 'UpdateLawyerLetter',
  components: {
    feedBack,
    addUpdate,
    UpdateComment,
    SelectPersonModal
  },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      personList: [],
      visibleState: {
        comment: false, // 批注弹窗
        selectPerson: false // 人员选择弹窗
      },
      formInfo: {
        branchComName: "",
        projectName: "",
        executionComments: []
      },
      loadingState: {
        isDetail: false
      },
      loading: false,
      queryParam: {},
      loadData: [],
      project: {},
      output: {},
      caseInformation: {},
      feedbackData: {},
      visible: false,
      lawyerLetterDetails: {},
      addUpdateVisible: false,
      addUpdateForm: {},
      tableId: undefined
    }
  },
  computed: {
    pageType() {
      if (this.isAudit) {
        return 'look'
      }
      return this.$route.query.pageType || 'look'
    },
    // 更新操作类型,为空时仅查看，有值时可操作对应模块数据 'progress' | 'comment' | ''
    updateType() {
      return this.$route.query.updateType || ''
    },
    pageTitle() {
      return !this.updateType ? '执行案件详情信息' : '执行案件更新'
    },
    progressColumn() {
      if (this.updateType === 'progress') {
        return progressColumn
      }
      return progressColumn.filter((item) => item.dataIndex !== 'action')
    },
    commentColumn() {
      if (this.updateType === 'comment') {
        return commentColumn
      }
      return commentColumn.filter((item) => item.dataIndex !== 'action')
    }
  },
  mounted() {
    this.getDetailReq()
  },
  methods: {
    async selectPersonFinish(data) {
      try {
        this.loadingState.isDetail = true
        this.visibleState.selectPerson = false
        const params = {
          id: this.addUpdateForm.id,
          executionId: this.$route.query.id,
          pushUserId: data.userId,
          pushUserName: data.name
        }
        await pushComment(params)
        this.$message.success('推送成功')
        this.getDetailReq()
      } catch (e) {
        this.loadingState.isDetail = false
        console.error(e)
      }
    },
    /**
     * 批注意见更新完成之后触发的回调
     */
    updateCommentFinish() {
      this.visibleState.comment = false
      this.getDetailReq()
    },
    /**
     * 更新批注意见
     * @param {String} actionType 'add' | 'edit'
     */
    updateComment(actionType, data = {}) {
      if (actionType === 'delete') {
        this.handleDelete('comment', data)
        return
      }
      this.addUpdateForm = { ...data, executionId: this.$route.query.id }
      if (actionType === 'push') {
        this.visibleState.selectPerson = true
        this.personList = []
        return
      }
      this.visibleState.comment = true
    },
    /**
     * 解析状态值
     */
    resolveStatus(status) {
      return CASE_STATUS_MAP[status] || ''
    },
    async getDetailReq() {
      try {
        if (!this.$route.query.id) return
        const params = {
          id: this.$route.query.id
        }
        this.loadingState.isDetail = true
        const fn = this.isAudit ? getCommentDetailByApproval : getDetail
        this.formInfo.executionComments = []
        const res = await fn(params)
        this.formInfo = {
          ...this.formInfo,
          ...res.data,
          branchComName: res.data?.projectInfo?.branchComName,
          projectName: res.data?.projectInfo?.projectName,
          legalTypeName: res.data?.legalType?.name,
          amount: res.data?.amountVO?.amount
        }
      } catch (e) {
        console.error(e)
      }
      this.loadingState.isDetail = false
    },
    initDetail() {
      let that = this
      this.loading = true
      getLawyerLetterDetails({ id: that.$route.query.id })
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            that.loadData = res.data.theProgress || ''
            that.project = res.data.project || ''
            that.lawyerLetterDetails = res.data.lawyerLetterDetails || ''
          }
        })
        .catch((res) => {
          this.loading = false
        })
    },
    getDetails(record) {
      this.feedbackData.name = record.reminder.name
      this.feedbackData.position = record.reminder.position
      this.feedbackData.time = record.reminder.time
      this.feedbackData.content = record.feedbackContent
      this.visible = true
    },
    /**
     * 更新进展情况
     * @param {String} actionType 'progress' | 'comment'
     */
    updateProgress(actionType, data = {}) {
      if (actionType === 'delete') {
        this.handleDelete('progress', data)
        return
      }
      this.addUpdateForm = { ...data, executionId: this.$route.query.id }
      this.addUpdateVisible = true
    },
    handleDelete(type, data) {
      const fnMap = {
        progress: deleteProgress,
        comment: deleteComment
      }
      packageConfirm({
        callback: async () => {
          return (
            fnMap[type] &&
            fnMap[type]({ id: data.id, executionId: this.$route.query.id }).then(() => {
              this.$message.success('删除成功')
              this.getDetailReq()
            })
          )
        }
      })
    },
    handleClose() {
      this.$close()
    }
  }
}
</script>

<style scoped>
.box {
  margin: 12px 0;
}

.coverlayer {
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
</style>
